//由于webpack是基于Node 进行构建的，所以webpack配置文件中任何合法的Node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle.js添加到到页面底部
//配置插件，需要在导出的对象中挂载一个plugins节点
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//当以命令行形式运行webpack 或 webpack-dev-server 时，工具会发现我们并没有提供要打包的文件的入口和出口文件，
// 此时它会检查项目根目录的配置文件，并读取这个文件，然后就拿到这个配置对象，之后根据这个对象进行打包构建。
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/main.js'),//入口文件
    output: {//指定输出选项
        path: path.join(__dirname, './dist'),//输出路径
        filename: 'bundle.js'//指定输出文件的名称

    },
    plugins: [//所有webpack插件的 配置节点
        new htmlWebpackPlugin({
            // 指定模板文件
            template: path.join(__dirname, './src/index.html'),//指定模板文件路径
            filename: 'index.html'//设置生成的内存页面名称
        }),
        new VueLoaderPlugin()
    ],
    module: {//配置所有第三方loader 模块
        rules:[//第三方模块匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=29214&name=[hash:8]-[name].[ext]' },//处理图片路径的loader
            { test: /\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader' },//处理字体文件的loader
            { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' },//配置Babel来转换高级es6语法
            { test: /\.vue$/, use: 'vue-loader' }
            // { parser : {amd : false}}

            // limit 给定的值是图片大小，单位是byte，如果我们引用的图片大于或者等于给定的limit值，则不会转为Base64格式的字符串，
            // 反之亦然。

        ]
    },
    resolve: {
        alias: {// 修改 vue 被导入时包的路径
            // "vue$": "vue/dist/vue.js"
        }
    }
}